<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Lazy</span></h1>
        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking
            onLazyLoad callback everytime <b>paging</b>, <b>sorting</b> and <b>filtering</b> happens. Sample here loads the data from remote datasource efficiently using lazy loading.
            Also, the implementation of <b>checkbox selection</b> in lazy tables is left entirely to the user. Since the table component does not know what will happen to the data on the next page or whether there are instant data changes, the selection array can be implemented in several ways.
            One of them is as in the example below.</p>
    </div>
    <app-demoActions github="table" stackblitz="tablelazy-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)" responsiveLayout="scroll" dataKey="id"
            [selection]="selectedCustomers" (selectionChange)="onSelectionChange($event)" [selectAll]="selectAll" (selectAllChange)="onSelectAllChange($event)"
            [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 3rem"></th>
                    <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
                    <th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
                    <th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
                    <th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
                </tr>
                <tr>
                    <th style="width: 3rem">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th>
                        <p-columnFilter type="text" field="name"></p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter type="text" field="country.name"></p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter type="text" field="company"></p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                <p-multiSelect [ngModel]="value" appendTo="body" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
                                    <ng-template let-option pTemplate="item">
                                        <div class="p-multiselect-representative-option">
                                            <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
                                            <span class="ml-1">{{option.name}}</span>
                                        </div>
                                    </ng-template>
                                </p-multiSelect>
                            </ng-template>
                        </p-columnFilter>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td>
                        <p-tableCheckbox [value]="customer"></p-tableCheckbox>
                    </td>
                    <td>{{customer.name}}</td>
                    <td>{{customer.country.name}}</td>
                    <td>{{customer.company}}</td>
                    <td>{{customer.representative.name}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablelazy-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomers($event)" responsiveLayout="scroll" dataKey="id"
    [selection]="selectedCustomers" (selectionChange)="onSelectionChange($event)" [selectAll]="selectAll" (selectAllChange)="onSelectAllChange($event)"
    [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [globalFilterFields]="['name','country.name', 'company', 'representative.name']"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;tr&gt;
            &lt;th style="width: 3rem"&gt;&lt;/th&gt;
            &lt;th pSortableColumn="name"&gt;Name &lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;th pSortableColumn="country.name"&gt;Country &lt;p-sortIcon field="country.name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;th pSortableColumn="company"&gt;Company &lt;p-sortIcon field="company"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
            &lt;th pSortableColumn="representative.name"&gt;Representative &lt;p-sortIcon field="representative.name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th style="width: 3rem"&gt;
                &lt;p-tableHeaderCheckbox&gt;&lt;/p-tableHeaderCheckbox&gt;
            &lt;/th&gt;
            &lt;th&gt;
                &lt;p-columnFilter type="text" field="name"&gt;&lt;/p-columnFilter&gt;
            &lt;/th&gt;
            &lt;th&gt;
                &lt;p-columnFilter type="text" field="country.name"&gt;&lt;/p-columnFilter&gt;
            &lt;/th&gt;
            &lt;th&gt;
                &lt;p-columnFilter type="text" field="company"&gt;&lt;/p-columnFilter&gt;
            &lt;/th&gt;
            &lt;th&gt;
                &lt;p-columnFilter field="representative" matchMode="in" [showMenu]="false"&gt;
                    &lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
                        &lt;p-multiSelect [ngModel]="value" appendTo="body" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name"&gt;
                            &lt;ng-template let-option pTemplate="item"&gt;
                                &lt;div class="p-multiselect-representative-option"&gt;
                                    &lt;img [alt]="option.label" src="assets/showcase/images/demo/avatar/&#123;&#123;option.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                                    &lt;span class="ml-1"&gt;&#123;&#123;option.name&#125;&#125;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/ng-template&gt;
                        &lt;/p-multiSelect&gt;
                    &lt;/ng-template&gt;
                &lt;/p-columnFilter&gt;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-customer&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;p-tableCheckbox [value]="customer"&gt;&lt;/p-tableCheckbox&gt;
            &lt;/td&gt;
            &lt;td&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
            &lt;td&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Customer, Representative &#125; from '../../domain/customer';
import &#123; CustomerService &#125; from '../../service/customerservice';
import &#123; LazyLoadEvent &#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './tablelazydemo.html'
&#125;)
export class TableLazyDemo implements OnInit &#123;

    customers: Customer[];

    totalRecords: number;

    cols: any[];

    loading: boolean;

    representatives: Representative[];

    selectAll: boolean = false;

    selectedCustomers: Customer[];

    constructor(private customerService: CustomerService) &#123; &#125;

    ngOnInit() &#123;
        this.representatives = [
            &#123;name: "Amy Elsner", image: 'amyelsner.png'&#125;,
            &#123;name: "Anna Fali", image: 'annafali.png'&#125;,
            &#123;name: "Asiya Javayant", image: 'asiyajavayant.png'&#125;,
            &#123;name: "Bernardo Dominic", image: 'bernardodominic.png'&#125;,
            &#123;name: "Elwin Sharvill", image: 'elwinsharvill.png'&#125;,
            &#123;name: "Ioni Bowcher", image: 'ionibowcher.png'&#125;,
            &#123;name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'&#125;,
            &#123;name: "Onyama Limba", image: 'onyamalimba.png'&#125;,
            &#123;name: "Stephen Shaw", image: 'stephenshaw.png'&#125;,
            &#123;name: "Xuxue Feng", image: 'xuxuefeng.png'&#125;
        ];

        this.loading = true;
    &#125;

    loadCustomers(event: LazyLoadEvent) &#123;
        this.loading = true;

        setTimeout(() =&gt; &#123;
            this.customerService.getCustomers(&#123;lazyEvent: JSON.stringify(event)&#125;).then(res =&gt; &#123;
                this.customers = res.customers;
                this.totalRecords = res.totalRecords;
                this.loading = false;
            &#125;)
        &#125;, 1000);
    &#125;

    onSelectionChange(value = []) &#123;
        this.selectAll = value.length === this.totalRecords;
        this.selectedCustomers = value;
    &#125;

    onSelectAllChange(event) &#123;
        const checked = event.checked;

        if (checked) &#123;
            this.customerService.getCustomers().then(res =&gt; &#123;
                this.selectedCustomers = res.customers;
                this.selectAll = true;
            &#125;);
        &#125;
        else &#123;
            this.selectedCustomers = [];
            this.selectAll = false;
        &#125;
    &#125;
&#125;
</app-code>

         </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablelazy-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
